<template>
	<view class="content">
		<!-- F1: 状态栏 -->
		<view 
			class="status-bar"
			:style="{height: statusBarHeight+'px'}"
		/>
		<!-- F2: LOGO -->
		<!-- 图像的默认大小为320*240 
			mode="widthFix"  宽度固定，高度等比例缩放
		-->
		<image 
			src="/static/img/logo.png"
			class="logo"
			mode="widthFix"
		/>
		<!-- F3: 手机号码输入框 -->
		<view class="input-group">
			<input type="text" placeholder="请输入手机号码" class="input" v-model="phone" />
			<uni-icons type="phone-filled" color="#090" size="25" class="icon left" />
			<uni-icons type="clear" color="#1296DB" size="25" class="icon right" @click="phone=''" />
		</view>
		<!-- F4: 密码框 -->
		<view class="input-group pwd-group">
			<input 
				:type="isHide ? 'password' : 'text'" 
				placeholder="请输入密码" 
				class="input" 
				v-model="upwd" 
			/>
			<uni-icons type="locked-filled" color="#090" size="25" class="icon left" />
			<!-- 属性绑定 -->
			<uni-icons :type="isHide ? 'eye-slash' : 'eye'" size="25" class="icon right" @click="isHide=!isHide" />
		</view>
		<!-- F5: 提交按钮 -->
		<button class="btn" @click="doLogin">登 录</button>
		<!-- F6: 忘记密码 -->
		<!-- url: 要跳转的页面 -->
		<!-- 导航跳转 -->
		<navigator class="find" url="/pages/find/find" open-type="navigate">忘记密码</navigator>
		<!-- <navigator class="find" url="/pages/find/find" open-type="redirect">忘记密码(销毁跳转)</navigator> -->
		<!-- <navigator url="/pages/index/index" open-type="switchTab">首页（页签跳转）</navigator> -->
	</view>
</template>

<script>
	// 从外部模块引入了方法
	import { userLogin } from '../../service'
	export default {
		data() {
			return {
				// 准备变量用于保存获取的状态栏高度，并提供初始值
				statusBarHeight: 0,
				phone: '13501234567', // 手机
				upwd: '123456',  //密码
				isHide: true   //是否隐藏
			}
		},
		// 生命周期函数
		// 当页面组件挂载后，自动执行
		onLoad() {
			// 获取状态栏的高度，并将高度保存到数据中
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight
		},
		methods: {
			// 处理按钮点击后的操作
			async doLogin() {
				// 获取输入的手机号码和密码
				console.log(this.phone,this.upwd)
				// 验证手机号码格式是否正确，如果不正确
				// 使用正则表达式进行验证
				if(!/^1[3-9]\d{9}$/.test(this.phone)) {
					// 弹出吐司对话框，阻止往后执行
					return uni.showToast({
						title: '手机号码格式错误',
						icon: 'none',  // 图标
						duration: 3000
					})
				}
				// 验证密码是否合法，长度不能少于6位
				if(this.upwd.length < 6) {
					return uni.showToast({
						title: '密码格式错误',
						icon: 'none',
						duration: 3000
					})
				}
				// 请求后端
				const data = await userLogin(this.phone,this.upwd)
				console.log(data)
				// 判断是否成功
				if(data.code === 200) {
					
					
					uni.showToast({
						title: '登录成功',
						icon: 'none',
						// 调到吐司方法结束后执行
						complete() {
							// 跳转到首页（页签跳转）
							uni.switchTab({
								url: '/pages/index/index'
							})
						}
					})
				} else {
					// 模态框
					uni.showModal({
						title: '登录失败',
						content: '错误原因：'+data.msg
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: $uni-bg-color;
	}
	// F1: 状态栏
	.status-bar {
		background-color: $zh-theme-color;
		height: 30px;
	}
	// F2: LOGO
	.logo {
		width: 450rpx;
		margin: $uni-spacing-col-lg*6 auto 0;
	}
	// 屏幕适配，当屏幕的高度大于800,增大顶部的留白
	@media screen and (min-height: 800px) {
		.logo {
			margin-top: $uni-spacing-col-lg*10;
		}
	}
	
	
	// F3: 输入框
	.input-group {
		background-color: $uni-bg-color-grey;
		margin: $uni-spacing-col-lg*3 $uni-spacing-row-lg 0;
		position: relative;
		border-radius: $uni-border-radius-lg;
		&.pwd-group {
			margin-top: $uni-spacing-col-lg*1.5;
		}
		.input {
			width: 100%;
			font-size: $uni-font-size-base;
			height: $uni-font-size-lg*3;
			padding: 0 $uni-spacing-row-base*3;
			border: 0 none;// 去除边框
			background: none; // 去除背景
			outline: none; // 去除点击后外轮廓
		}
		.icon {
			position: absolute;
			top: $uni-spacing-col-lg;
			&.left {
				left: $uni-spacing-row-sm;
			}
			&.right {
				right: $uni-spacing-row-sm;
			}
		}
	}
	// F5: 登录按钮
	.btn {
		// width: 100%;
		background-color: $zh-theme-color;
		color: $zh-theme-color-inverse;
		margin: $uni-spacing-col-lg*1.5 $uni-spacing-row-lg 0;
		font-size: $uni-font-size-base;
		&:active {
			background-color: darken($zh-theme-color,5%);
		}
	}
	.find {
		font-size: $uni-font-size-base;
		text-align: center;
		margin-top: $uni-spacing-col-lg;
		color: $zh-theme-color;
	}
</style>
